<template>
  <div id="app">
        <el-row class="tac">
            <el-col :span="12" style="width:100%">
               <ul >
                   <li v-for="(item,index) in tagList" :key="index"> 
                     <router-link tag="li" :to="{name: item.name}" class="content-li">
                               <img :src="item.meta.icon" class="img" >
                               <span style="padding-left:5px">{{item.meta.title}}</span>
                     </router-link>
                   </li>
                </ul>
            </el-col>
        </el-row>
        <div class="content">
            <router-view/>
        </div>
        
  </div>
</template>

<script>
import router from '@/router/index'
import store from './store/store'
// const logo = require('@/static/logo.png')

export default {
  name: 'App',
  created() {
  },
  mounted() {
    this.tagList = router.options.routes
  },
  data() {
    return {
       tagList:[],

       img:require('./assets/header2.png')

    }
  }
}
</script>

<style scoped>
body {
  height: 100vh;
}
#app {
  height: 100vh;
  display: flex;
  flex-direction: row;
}
.tac {
  flex: 1;
  height: 100%;
  background:rgba(17, 22, 38, 1);
}
span {
  font-size:16px;
}
.left-tag {
  padding-left:50px;
}
li:hover {
  background: gray;
  cursor: pointer;
  color: aliceblue;
}
.content-li {
   height:60px;
   line-height:60px;
   padding-left:50px;
   color: aliceblue;
   position: relative;
}
.content {
  flex: 9;
  background: url('./assets/bg.png') no-repeat;
  background-size: 100% 100%;
}
a {
  color: aliceblue;
  text-decoration: none;
}
/* ul .router-link-active{
   background: blue;
} */
ul .router-link-exact-active{
   background:rgba(36, 108, 255, 1);
} 
.img {
  height: 15px;
  width: 15px;
  position: absolute;
  top: 50%;
  transform: translate(-20px,-50%);
}



</style>
